<template>
  <section id="orderDetail">
    <!--2手动银行卡订单 5USDT充值-->
    <template v-if="orderData.type == '2' || orderData.type == '5'">
      <h2 class="title">订单详情</h2>
      <div class="money">
        <span>{{orderData.money_rmb}}</span>
        <span>CNY</span>
        <span>≈</span>
        <template v-if="orderData.type == '2'">
          <span>${{orderData.money}}</span>
        </template>
        <template v-if="orderData.type == '5'">
          <span>{{orderData.money}}</span>
          <span>USDT</span>
        </template>
      </div>
      <div class="time">
        <img src="../assets/image/time.png" alt="" width="16" height="16">
        <span>待付款时间：</span>
        <span>{{mint}}:{{source}}</span>
      </div>
      <ul class="list">
        <li><img src="../assets/image/icon_yinlian.png" alt="" width="28">银行转账</li>
        <li>
          <div>收款人</div>
          <div>{{orderData.payee}}<span class="copy" @click="$js.copy(orderData.payee)"></span></div>
        </li>
        <li>
          <div>银行卡信息</div>
          <div>{{orderData.bank_info}}<span class="copy" @click="$js.copy(orderData.bank_info)"></span></div>
        </li>
        <li>
          <div>银行卡号</div>
          <div>{{orderData.bank_num}}<span class="copy" @click="$js.copy(orderData.bank_num)"></span></div>
        </li>
        <li>
          <div>付款参考号</div>
          <div>{{orderData.note}}<span class="copy" @click="$js.copy(orderData.note)"></span></div>
        </li>
      </ul>
      <p class="notice">
        注意：请在15分钟内向收款方付款
      </p>
      <div class="button">
        <button class="btn_gray" v-if="orderData.user_confirm == '1' || had">我已支付</button>
        <button class="btn_private" @click="userConfirm" v-else>我已支付</button>
      </div>
    </template>
  </section>
</template>
<script>
//例如：import 《组件名称》 from '《组件路径》';
import { _userConfirm } from "../axios/index.js";
export default {
  data() {
    return {
      rechargeInfo: {},
      had: false,
      mint:"--",
      source: "--",
      timer: null
    }
  },
  props:{
    orderData:{
      type:Object
    }
  },
  methods:{
    endTime(time) {
      var _min = Math.floor(time / 60),
        _source = time % 60;
      this.mint = _min;
      this.source = _source;
     this.timer= setInterval(() => {
        time -= 1;
        if (time > 0) {
          _min = Math.floor(time / 60);
          _source = time % 60;
          this.mint = _min;
          this.source = _source;
        } else {
          this.mint = 0;
          this.source = 0;
        }
      }, 1000);
    },
    async userConfirm() {
      const res = await _userConfirm({ order_id: this.orderData.order_id });
      if (res.data.code == 200) {
        this.had = true;
        this.$Message.success(res.data.msg);
      } else {
        this.$Message.error(res.data.msg);
      }
    }
  },
  created() {
    let _self = this;
    _self.endTime(_self.orderData.surplus_time)
  }
}
</script>
